<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Rich Text Editing</title>
		<style>
			#RichEditor {
				width: 600px;
				height: 200px;
				border: 1px solid black;
			}

			#Editor {
				width: 600px;
				padding: 10px;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
		</style>
	</head>
	<body>
		<div id="RichEditor" name="edit" contenteditable="true">
		</div>
		<div id="Editor">
			<input type="button" value="斜体" onclick="setFontName()">
			<input type="button" value="颜色" onclick="setFontColor()">
			<input type="button" value="字号" onclick="setFontSize()">
			<input type="button" value="图像" onclick="setBgImage()">
			<input type="button" value="链接" onclick="setHtmlLink()">
			<input type="button" value="撤销" onclick="Revocation()">
			<input type="button" value="代码" onclick="showCode()">
			<input type=button value=删除 οnclick=document.execCommand('Delete')>
			<input type=button value=黑体 οnclick=document.execCommand('Bold')>
			<input type=button value=斜体 οnclick=document.execCommand('Italic')>
			<input type=button value=下划线 οnclick=document.execCommand('Underline')>
		</div>
		<script>
			function setFontName() {
				console.log('Italic');
				document.execCommand("FontName", false, "Italic");
			}


			function setFontSize() {
				console.log('fontsize');
				document.execCommand("FontSize", false, 30);
			}

			function setFontColor() {
				console.log('forecolor');
				document.execCommand("ForeColor", false, "red");
			}

			function setBgImage() {
				console.log('insertimage');
				document.execCommand("insertimage", false, "images/home.gif");
			}

			function setHtmlLink() {
				console.log('createlink');
				document.execCommand("createlink", false, "http://www.sysu.edu.cn");
			}

			function Revocation() {
				console.log('undo');
				var o = document.execCommand('undo');;
			}

			function showCode() {
				console.log('RichEditor');
				var myRichEditor = document.getElementById("RichEditor");
				alert(myRichEditor.innerHTML);
			}
		</script>
	</body>
</html>
